<template>
    <div>
        <section class="top-info">
            <img src="../../../assets/business/images/ruzhu-pic.png" alt="">
        </section>
        <section class="user-content">
            <ul class="user-list">
                <li class="same-box" v-if="0==compType"><!--个人的时候v-if="1==compType"-->
                    <label class="left-text">开店形式：</label>
                    <div class="right-info dw">
                        <img class="xllbimg" src="../../../assets/c5b2d8751873933e0b9cfad028870ec.png">
                        <select class="xllb" v-model="authorizationfs" @change="choose()">
                            <option  value="1">被授权人开店</option>
                            <option  value="0">法人开店</option>
                        </select>

                    </div>
                </li>
                <li class="same-box" ><!--个人的时候v-if="1==compType"-->
                    <label class="left-text">店铺名字：</label>
                    <div class="right-info dw">
                        <input type="text" v-model="company_name" class="input-text shopName_1" placeholder="请填写店铺名称（最多30个字）" maxlength="30">
                        <p class="tips shopNameTip "><i class="icon"></i>请填写店铺名称</p>
                    </div>
                </li>
                <li class="same-box" v-if="1==compType">
                    <label class="left-text dw">负责人：</label>
                    <div class="right-info">
                        <input type="text" v-model="linkman" class="input-text useName" placeholder="请输入负责人姓名" maxlength="6">
                        <p class="tips useNameTip"><i class="icon"></i>请填写负责人姓名</p>
                    </div>
                </li>
                 <li class="same-box" v-else-if="0==compType&&1==authorizationfs">
                    <label class="left-text dw">被授权人：</label>
                    <div class="right-info">
                        <input type="text" v-model="linkman" class="input-text useName" placeholder="请输入负责人姓名" maxlength="6">
                        <p class="tips useNameTip"><i class="icon"></i>请填写被授权人姓名</p>
                    </div>
                </li>
                <li class="same-box" v-else-if="0==compType&&0==authorizationfs">
                    <label class="left-text dw">法人：</label>
                    <div class="right-info">
                        <input type="text" v-model="linkman" class="input-text useName" placeholder="请输入负责人姓名" maxlength="6">
                        <p class="tips useNameTip"><i class="icon"></i>请填写法人开店姓名</p>
                    </div>
                </li>
                <li class="same-box">
                    <label class="left-text dw">手机号：</label>
                    <div class="right-info">
                        <input type="tel" class="input-text telPhone" maxlength="11" v-model="mobile" placeholder="请输入负责人的手机号">
                        <p class="tips telPhoneTip"><i class="icon"></i>请填写负责人的手机号</p>
                    </div>
                </li>
                 <li class="same-box" v-if="0==compType&&1==authorizationfs">
                    <label class="left-text dw">授权证明(需签字并盖章)：</label>
                    <div class="right-info" style="padding-top:15px;">
                         <img :src="shouquan" style="height: 2rem;top: 0.25rem;right: 1rem;width: 3rem;">
                        <label style="margin-right:15px;color:#459FFF" for="shouquan">点我上传</label>
                        <input class="upload-img" id="shouquan" style="display: none" type="file" @change="onFileChange($event,'shouquan')" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple>
                    </div>
                </li>
                <li class="same-box">
                    <label @click="mjidxz(0)" class="left-text dw">大陆：<img class="xuanze" v-if="0==mjidxzStyle" src="../../../assets/personal/images/chat-icon2-active.png"><img v-else class="xuanze" src="../../../assets/personal/images/chat-icon2.png"> </label>
                    <label @click="mjidxz(1)" class="left-text dw">港澳：<img class="xuanze" v-if="1==mjidxzStyle" src="../../../assets/personal/images/chat-icon2-active.png"><img v-else class="xuanze" src="../../../assets/personal/images/chat-icon2.png"></label>
                    <label @click="mjidxz(2)" class="left-text dw">台湾：<img class="xuanze" v-if="2==mjidxzStyle" src="../../../assets/personal/images/chat-icon2-active.png"><img v-else class="xuanze" src="../../../assets/personal/images/chat-icon2.png"></label>
                </li>
                <li class="same-box">
                    <label class="left-text dw">身份证号：</label>
                    <div class="right-info">
                        <input type="text" v-model="jm_id" class="input-text userId" placeholder="请输入身份证号" maxlength="18">
                        <p class="tips userIdTip"><i class="icon"></i>请填写身份证号</p>
                    </div>
                </li>
                <li class="same-box-id">
                    <label class="choose" for="inpupimgfront">上传身份证正面图片</label>
                    <input class="upload-img" id="inpupimgfront" style="display: none" type="file" @change="onFileChange($event,'img_id_front')" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple>
                    <img :src="img_id_front">
                </li>
                <li class="same-box-id">
                    <label class="choose" for="inpupimgback">上传身份证反面图片</label>
                    <input class="upload-img" id="inpupimgback" style="display: none" type="file" @change="onFileChange($event,'img_id_back')" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple>
                    <img :src="img_id_back">
                </li>
                <li class="same-box-id" @click="sfz_cl">
                    <label class="choose">上传手持身份证</label>
                </li>
                <li class="same-box-id shili" v-show="sfz" style="height:auto;">
                    <label class="choose ">示例</label>
                    <img src='../../../assets/business/images/sfz.png' class="shili_tu" style="display:block; position:relative;height:10rem; width: 60%; margin: 0 auto;right: 0;margin-bottom: 0.75rem;">
                </li>
                <li class="same-box-id" v-show="sfz">
                    <label class="choose" for="inpupimgback_sc">点我上传</label>
                    <input class="upload-img" id="inpupimgback_sc" style="display: none" type="file" @change="onFileChange($event,'img_id_back_sc')" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" multiple>
                    <img :src="img_id_back_sc">
                </li>
                <li class="same-box same-box-add" @click="region" v-show="false">
                    <label class="left-text" style=" white-space:nowrap;">请选择地区：</label>
                    <div class="region_dingwei">
                        <span>{{sheng}}</span>
                        <span>{{shi}}</span>
                        <span>{{qu}}</span>
                    </div>
                </li>
                <li class="same-box same-box-add">
                    <label class="left-text" style=" white-space:nowrap;">店铺住详细地址：</label>
                    <input type="text" placeholder="请输入所在地区" style="border:none;text-align: right; font-size: 14px;" v-model="diqu">
                </li>
                <li>
                    <div id="shopsMap" style="width:100%;height:200px;"></div>
                </li>
                <li class="same-box" @click="hangye_r">
                    <label class="left-text">行业选择：</label>
                    <span class="fanli">{{companyCommission}}%</span>
                    <div class="right-info">
                        <p class="choose choose-hy text_hy" @click="hangye(1);">{{hangyetext}} &gt;</p>
                        <p class="tips"><i class="icon"></i>请选择行业</p>
                    </div>
                </li>
                <li class="same-box" v-show="false">
                    <label class="left-text">实体店</label>
                    <div class="std">
                        <div>
                            <input type="radio" name="sex" value='male' style="" /><span>有</span>
                        </div>
                        <div>
                            <input type="radio" name="sex" value='male' /><span>无</span>
                        </div>
                    </div>
                </li>
                <li class="same-box-id" v-if="0==compType">
                    <label class="choose" @click=" switchaglee">上传营业资格许可照片</label>
                </li>
                 <li class="same-box" v-if="1==compType">
                    <label class="left-text dw">个人店铺申请金额：</label>
                    <div class="right-info" style="padding-top:15px;">
                        <span class="lijizhifu" @click="payHref" v-if="0==depositStatus">立即支付</span>
                        <span class="lijizhifu" style="background:#16C60C;"  v-else>个人店铺申请金额已支付</span>
                    </div>
                </li>
            </ul>
            <div class="clause-info" >
                <i class="icon" :class="{active: isagree}"></i><!--ruzhu_tiaokuan-->
                <span class="text" @click="switchagree">我已阅读并同意  </span><a @click="ruzhu_tiaokuan" style="color:#2691ff">《入驻条款》</a>
            </div>
            <a @click="submrz" class="register-btn">商家入驻</a>
        </section>

        <section class="hide-hy-content" :class="{content_rl:isagggg}">
            <div class="hy-content-in">
                <div class="left-info">
                    <ul class="tab-ul">
                        <li class="list-li" @click="hangye(item.id,item.companyCommission)" :class="{active:hangyeID==item.id}" v-for="item in lis" :key="item.id">
                            <i class="icon"></i>
                            {{item.name}}
                        </li>
                    </ul>
                </div>
                <div class="right-info">
                    <div class="tab-content">
                        <ul class="tab-ul">
                            <li class="list-li text_show" @click="selectsubhangye(item.id,item.name)" v-for="item in shop" :key="item.id" :class="{active:hangyesubID==item.id}">
                                {{item.name}}
                                <i class="icon"></i>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="backTo backTo1" @click="fanhuila">返回</div>
        </section>
        <!--zz-->
        <div class="yingyezhizhao width" :class="{yingyezhizhaozz: isaglef}">
            <div class="backTo" @click="switchaglee">返回</div>
            <div class="toptext">
                安全监督信息
            </div>
            <section class="user-content">
                <ul class="user-list">
                    <li class="same-box">
                        <label class="left-text">单位名称：</label>
                        <div class="right-info dw">
                            <input type="text" class="input-text unitName" placeholder="请填写单位名称" v-model="unit_name" maxlength="30">
                            <p class="tips unit_name"><i class="icon"></i>请填写单位名称</p>
                        </div>
                    </li>
                    <li class="same-box">
                        <label class="left-text">许可证号：</label>
                        <div class="right-info dw">
                            <input type="text" class="input-text licenseNumber" placeholder="请填写许可证号" v-model="license_id" maxlength="20">
                            <p class="tips license_id"><i class="icon"></i>请填写许可证号</p>
                        </div>
                    </li>
                    <li class="same-box">
                        <label class="left-text">法定代表人：</label>
                        <div class="right-info dw">
                            <input type="text" class="input-text legalPerson" placeholder="请填写法定代表人姓名" v-model="method_name" maxlength="6">
                            <p class="tips method_name"><i class="icon"></i>请填写法定代表人姓名</p>
                        </div>
                    </li>
                    <li class="same-box">
                        <label class="left-text">经营地址：</label>
                        <div class="right-info dw">
                            <input type="text" class="input-text jyAdd" placeholder="请填写经营地址" v-model="address_dz" maxlength="30">
                            <p class="tips address_dz"><i class="icon"></i>请填写经营地址</p>
                        </div>
                    </li>
                    <li class="same-box">
                        <label class="left-text">经营范围：</label>
                        <div class="right-info dw">
                            <input type="text" class="input-text jyRange" placeholder="请填写经营范围" v-model=" scop_fw" maxlength="30">
                            <p class="tips scop_fw"><i class="icon"></i>请填写经营范围</p>
                        </div>
                    </li>
                    <li class="same-box">
                        <label class="left-text">有效日期：</label>
                        <div class="right-info dw">
                            <input type="date" class="input-text yxDate" placeholder="请填有效日期" v-model="end_data">
                            <p class="tips"><i class="icon"></i>请填有效日期</p>
                        </div>
                    </li>
                </ul>
            </section>
            <section class="upload-content">
                <div class="same-upload same-upload-zz">
                    <div class="top">
                        请上传营业执照 <i class="icon"></i>
                    </div>
                    <label for="qyzfr">
                        <div class="bottom">
                            <img src="" class="image-info" alt="">
                            <div class="up-info">
                                <img src="../../../assets/business/images/photo-icon.png" class="photo-icon" alt="">
                                <input class="upload-img uploadImg" type="file" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" id="qyzfr" @change="onFileChange($event,'business_img_back')">
                            </div>
                            <p class="b-text">企业法人营业执照</p>
                        </div>  <img :src="business_img_back">
                    </label>
                </div>
                <div class="same-upload same-upload-xk">
                    <div class="top">
                        请上传服务许可证 <i class="icon"></i>
                    </div>
                    <label for="xzfwxkz">
                        <div class="bottom">
                            <img src="" class="image-info" alt="">
                            <div class="up-info">
                                <img src="../../../assets/business/images/photo-icon.png" class="photo-icon" alt="">
                                <input class="upload-img uploadImg" type="file" accept="image/jpg,image/png,image/gif,image/jpeg,image/svg" id="xzfwxkz" @change="onFileChange($event,'img_organization_code_certificate')">
                            </div>
                            <p class="b-text">行业服务许可证</p>
                        </div>
                        <img :src="img_organization_code_certificate">
                    </label>
                </div>
            </section>
            <div class="qd-content">
                <a href="javascript:void (0)" class="register-btn" @click="switchaglee">确定</a>
            </div>
            <!-- <div class="layer-content layer-con-yyzz">
               <div class="toptext">
                   <span class="shili">示例</span>
                   <img src="../../../assets/business/images/shili-pic1.png" class="shili-pic" alt="">
                   <p class="con-text">请上传正面照片，需文字清晰、边框完整、真实有效。</p>
               </div>
                <div class="bottom-info">
                    我知道了
                </div>
            </div>
            <div class="layer-content layer-con-xkzz">
                <div class="top-info">
                    <span class="shili">示例</span>
                    <img src="../../../assets/business/images/shili-pic1.png" class="shili-pic" alt="">
                    <p class="con-text">请上传正面照片，需文字清晰、边框完整、真实有效。</p>
                </div>
                <div class="bottom-info">
                    我知道了
                </div>
            </div> -->
        </div>
        <div class="shanhetongguo" :class="{cg:chenggongl==true}">
            <img src="../../../assets/personal/images/shehezhong.png">
            <div class="backTo"><router-link :to="{name:'Mine'}">返回</router-link></div>
        </div>
        <div class="region" v-show="region_f">
            <div class="area_ctr">
                <div class="area_btn_box">
                    <div class="area_btn larea_cancel" @click="cancel">取消</div>
                    <div class="area_btn larea_finish" @click="finish">确定</div>
                </div>
                <div class="">
                    <div class="area_roll">
                        <div class="tooth_new">
                            <!--省-->
                            <div class="tooth" v-for="item in districts_list_province" :v-model="sheng" :key="item.id" @click="IdClick(item.id,item.name)" :class="{red:item.id==provinceID}">
                                {{item.name}}
                            </div>
                        </div>
                        <div>
                            <div class="tooth" v-for="item in districts_list_city" :key="item.id" @click="IdClickprovince(item.id,item.name)" :class="{red:item.id==cityID}">
                                {{item.name}}
                            </div>
                        </div><!--市-->
                        <div>
                            <div class="tooth" v-for="item in districts_list_area" :key="item.id" @click="IdClickarea(item.id,item.name)" :class="{red:item.id==areaID}">
                                {{item.name}}
                            </div>
                        </div><!--区-->
                    </div>
                </div>
            </div>
        </div>
        <div class="body" v-show="ruzhu_tiaokuan_z">
             <clause></clause>
             <p class="con-text" style="text-align: center;" @click="ruzhu_tiaokuan">（以下无正文请点我返回）</p>
        </div>
    </div>
</template>
<script>
  //  import wx from 'weixin-js-sdk'
   import Clause from "@/components/clause";
    export default {
    components:{
        Clause
    },
        data() {
            return {
                lis: {},
                anniuID: 1,
                shop: {},
                hangyeID: 0,
                hangyesubID: 0,
                companyCommission: 0,
                isagree: true,
                isaglef: false,
                isagggg: false,
                chenggongl: false,
                hangyetext: "请选择行业",
                company_name: "",
                linkman: "",
                mobile: "",
                jm_id: "",
                img_id_front: "",
                img_id_back: "",
                img_id_back_sc: "",
                province: "",
                city: "",
                district: "",
                business_img_back: "",
                unit_name: '',
                license_id: '',
                method_name: '',
                address_dz: '',
                scop_fw: '',
                end_data: '',
                img_organization_code_certificate: '',
                diqu: '',
                sfz: false,
                region_f: false,     //地区三级联动变量
                districts_list_province: [],  //省
                districts_list_city: [],  //市The city
                districts_list_area: [],   //区
                provinceID: '',   //省ID
                cityID: '',     //市ID
                areaID: '',//区ID
                tur: false,
                sheng: '',  //省
                shi: '',  //市
                qu: '',    //区
                districtId: '',
                latitude: '39.9123285156502',//纬度
                longitude: '116.49130403995514',// 经度
                arMarker: [],
                ruzhu_tiaokuan_z:false,
                compType:this.$route.query.compType,//入驻类型
                authorizationfs:0,//授权方式
                shouquan:"",
                storeClassification:'',
                depositStatus:0,//押金状态0没交钱window.localStorage.
                mjidxzStyle:0
            }
        },
        beforeCreate() {

        },
        created() {
            this.districts();

        },
        mounted() {
            this.isPay();
            this.bianliang();
            this.getwxconfig();
        },
        methods: {
            mjidxz:function(type){
                this.mjidxzStyle=type
            },
            isPay:function(){
                 this.$http.get(this.APIURL_PREFIX + "/api/isPay").then((response) => {
                  console.log(response)

                  if(response.data.code==4){
                      console.log(response.data.code)
                      this.depositStatus=0//未支付
                  }else if(response.data.code==5){
                       console.log(response.data.code)
                      this.depositStatus=1
                  }
                }).catch(function (err) {
                    console.log(err)
                });
            },
            bianliang:function(){//变量
                var kong='undefined'
                if(kong!=typeof(localStorage.company_name)){
                    this.company_name=localStorage.company_name
                }
                if(kong!=typeof(localStorage.linkman)){
                this.linkman=localStorage.linkman
                }
                if(kong!=typeof(localStorage.mobile)){
                    this.mobile=localStorage.mobile
                }
                if(kong!=typeof(localStorage.jm_id)){
                    this.jm_id=localStorage.jm_id
                }
                if(kong!=typeof(localStorage.diqu)){
                    this.diqu=localStorage.diqu
                }
                if(kong!=typeof(localStorage.unit_name)){
                    this.unit_name=localStorage.unit_name
                }
                if(kong!=typeof(localStorage.license_id)){
                this.license_id=localStorage.license_id
                }
                if(kong!=typeof(localStorage.method_name)){
                this.method_name=localStorage.method_name
                }
                if(kong!=typeof(localStorage.address_dz)){
                this.address_dz=localStorage.address_dz
                }
                if(kong!=typeof(localStorage.scop_fw)){
                this.scop_fw=localStorage.scop_fw
                }
                if(kong!=typeof(localStorage.end_data)){
                this.end_data=localStorage.end_data
                }
                if(kong!=typeof(localStorage.img_id_front)){
                    this.img_id_front=localStorage.img_id_front
                }
                if(kong!=typeof(localStorage.img_id_back)){
                    this.img_id_back=localStorage.img_id_back
                }
                if(kong!=typeof(localStorage.img_id_back_sc)){
                    this.img_id_back_sc=localStorage.img_id_back_sc
                }
                if(kong!=typeof(localStorage.business_img_back)){
                    this.business_img_back=localStorage.business_img_back
                }
                if(kong!=typeof(localStorage.img_organization_code_certificate)){
                    this.img_organization_code_certificate=localStorage.img_organization_code_certificate
                }
                if(0!=localStorage.mjidxzStyle){
                    this.mjidxzStyle=localStorage.mjidxzStyle
                }
            },
            payHref:function(){
                window.location='/wap/business_rzPat.html'
            },
            //选择地区
            //确认
            choose:function(){//选择
                console.log(this.authorizationfs)
            },
            ruzhu_tiaokuan:function(){
               this.ruzhu_tiaokuan_z=!this.ruzhu_tiaokuan_z;
            },
            finish: function () {
                if (this.sheng == '') {
                    layer.msg("请选择地区")
                } else {
                    if (this.sheng == "" || this.shi == '') {
                        layer.msg("对不起请选择详细地区")
                    } else {
                        if (this.qu == "") {
                            this.districtId = this.cityID;
                            console.log(this.districtId)
                            this.region_f = !this.region_f;
                        } else {
                            this.districtId = this.areaID;
                            console.log(this.districtId)
                            this.region_f = !this.region_f;
                        }
                    }
                }
            },
            clearid() {
                this.provinceID = "",
                this.cityID = "",
                this.areaID = '',
                this.sheng = '',
                this.shi = ''
                this.qu = ''
                this.districtId = ''
                this.districts_list_city = []
                this.districts_list_area = []
            },
            cancel: function () {//取消
                this.region_f = !this.region_f
                this.clearid()
            },
            region: function () {//弹出
                this.region_f = !this.region_f
                this.clearid()
            },
            IdClick: function (id, name) {//点击的时候省
                this.provinceID = id;
                this.districts_list_city = []
                this.districts_list_area = []
                this.$http.get(this.APIURL_PREFIX + '/api/wap/districts', { params: { parentid: id } }).then((response) => {
                    this.districts_list_city = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
                this.sheng = name;
                console.log(this.sheng)
            },
            IdClickprovince: function (id, name) {//点击市
                this.cityID = id

                this.$http.get(this.APIURL_PREFIX + '/api/wap/districts', { params: { parentid: id } }).then((response) => {
                    this.districts_list_area = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
                this.shi = name;
                console.log(this.shi)
            },
            IdClickarea: function (id, name) { //区点击
                this.areaID = id
                this.qu = name;
                console.log(this.qu)
            },
            ///////////////////////////////////////////////////////////////////////////////以上是三级联动
            ///定位
            QQmap() {
                var vm = this;
                var geocoder = new qq.maps.Geocoder({
                    complete: function (result) {   //解析成功的回调函数
                        console.log(result.detail);
                        var address = result.detail.address;  //获取详细地址信息    addressComponents
                        var address_city = result.detail.addressComponents.city   //市
                        var address_province = result.detail.addressComponents.province           //省
                        var address_district = result.detail.addressComponents.district          //区
                        var address_street = result.detail.addressComponents.street
                        var address_streetNumber = result.detail.addressComponents.streetNumber
                        var address_town = result.detail.addressComponents.town
                        vm.diqu = address_town + address_streetNumber;
                        if (vm.arMarker.length) {
                            var ar = vm.arMarker;
                            ar.forEach(function (item) {
                                item.setMap(null);
                            })
                            vm.arMarker.length = 0;
                        }
                        var marker = new qq.maps.Marker({
                            position: new qq.maps.LatLng(vm.latitude, vm.longitude),
                            map: map
                        });
                        vm.arMarker.push(marker);
                        var api;
                        api = { params: { province: address_province, city: address_city, district: address_district } }
                        vm.$http.get(vm.APIURL_PREFIX + '/api/wap/districts/getName', api).then((response) => {
                            vm.sheng = response.data.data.province;
                            vm.shi = response.data.data.city;
                            vm.qu = response.data.data.district;
                            vm.provinceID = response.data.data.provinceId
                            vm.cityID = response.data.data.cityId
                            vm.areaID = response.data.data.districtId
                            vm.districtId = response.data.data.districtIds
                        }).catch(function (err) {
                            console.log(err)
                        });

                    }
                });
                var map = new qq.maps.Map(document.getElementById("shopsMap"));
                var center = new qq.maps.LatLng(vm.latitude, vm.longitude)
                map.panTo(center);
                map.zoomTo(13);
                qq.maps.event.addListener(
                    map,
                    'click',
                    function (event) {

                        vm.latitude = event.latLng.getLat();
                        vm.longitude = event.latLng.getLng();
                        var pos = new qq.maps.LatLng(vm.latitude, vm.longitude);
                        geocoder.getAddress(pos);

                    }
                );
                geocoder.getAddress(new qq.maps.LatLng(this.latitude, this.longitude))
            },
            getwxconfig() {
                var vm = this;
                this.$http.get(this.APIURL_PREFIX + "/api/wxs/config?url=" + escape(location.href.split('#')[0])).then((response) => {
                    console.log(response.data);
                    var appid = 'wx488ae3f57360b7ea';
                    wx.config({
                        debug: false,
                        appId: appid,
                        timestamp: response.data.data.timestamp,
                        nonceStr: response.data.data.noncestr,
                        signature: response.data.data.signature,
                        jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone', 'scanQRCode', 'getLocation','hideOptionMenu']
                    });
                    wx.ready(function () {

                        wx.hideOptionMenu();

                        wx.getLocation({
                            type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
                            success: function (res) {
                                vm.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
                                vm.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180
                                vm.QQmap()
                            },
                            fail: function () {
                                vm.QQmap()
                            },
                            cancel: function () {
                                vm.QQmap()
                            }
                        });
                    });

                }).catch(function (err) {
                    console.log(err)
                })
            },
            //////////////////////////////////////////////////////////////////////////////////////////////////////////
            sfz_cl: function () {//身份证
                this.sfz = !this.sfz
            },
            hangye_r() {
                this.isagggg = !this.isagggg
            },
            districts() {
                this.$http.get(this.APIURL_PREFIX + '/api/wap/districts', { params: { parentid: 0 } }).then((response) => {
                    this.districts_list_province = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
            },
            hangye: function (id, comp) {//行业
                this.hangyeID = id
                this.companyCommission = comp
                 console.log(comp)
                if("undefined"==typeof(comp)){
                    console.log(123)
                    this.companyCommission=2
                }
                this.$http.get(this.APIURL_PREFIX + '/api/wap/industry/selectAll?id=' + id).then((response) => {
                    this.lis = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
                this.$http.get(this.APIURL_PREFIX + '/api/wap/type/selectByIndustry/' + id).then((response) => {
                    this.shop = response.data.data;
                }).catch(function (err) {
                    console.log(err)
                });
            },
            selectsubhangye: function (id, text) {
                this.companyCommission
                this.hangyesubID = id;
                this.hangyetext = text;
                this.isagggg = !this.isagggg
                console.log(this.hangyesubID)
            },
            submrz() {
                var time = this.end_data;
                var tim = new Date(time).valueOf();
                var kongimg = "";
                var re = /^1\d{10}$/;  //手机号正则
                var regIdNo = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/
                //大陆
                var gangao=/^([A-Z]\d{6,10}(\(\w{1}\))?)$/  //港澳
                var taiwan= /^\d{8}|^[a-zA-Z0-9]{10}|^\d{18}$/;//台湾
                if(this.compType==0){
                    this.storeClassification=this.authorizationfs
                }else if(this.compType==1){
                     this.storeClassification=2
                }
                if (this.company_name == "") {
                    $(".shopNameTip").show();
                } else if (this.linkman == "") {
                    $(".useNameTip").show();
                } else if (this.mobile == ""|| re.test(this.mobile) == false) {
                    layer.msg("对不起手机号格式不正确")
                    $(".telPhoneTip").show();
                } else if (0==this.mjidxzStyle&&regIdNo.test(this.jm_id)==false ) {
                    layer.msg("对不起身份证格式不正确")
                    console.log("123")
                    $(".userIdTip").show();
                }
                else if (1==this.mjidxzStyle&&gangao.test(this.jm_id)==false ) {
                    layer.msg("对不起身份证格式不正确")
                    console.log("456")
                    $(".userIdTip").show();
                }
                else if (2==this.mjidxzStyle&&taiwan.test(this.jm_id)==false ) {
                    layer.msg("对不起身份证格式不正确")
                    console.log("789")
                    $(".userIdTip").show();
                } else if (this.img_id_front == kongimg) {
                    layer.msg("请上传身份证正面")
                } else if (this.img_id_back == kongimg) {
                    layer.msg("请上传身份证反面")
                } else if (this.img_id_back_sc == kongimg) {
                    layer.msg("请上传手持身份证")
                } else if (this.hangyesubID == "0") {
                    layer.msg("请选择行业类目")
                } else if (this.unit_name == ""&&0==this.compType) {//&&0==this.compType企业验证
                    layer.msg("请填写企业名称")
                    $(".unit_name").show();
                } else if (this.diqu == ""&&0==this.compType) {
                    layer.msg("请填写详细地址")
                }
                else if (this.license_id == ''&&0==this.compType) {
                    $(".license_id").show();
                } else if (this.method_name == ""&&0==this.compType) {
                    $(".method_name").show();
                } else if (this.address_dz == ''&&0==this.compType) {
                    $(".address_dz").show();
                } else if (this.scop_fw == ''&&0==this.compType) {
                    $(".scop_fw").show();
                } else if (tim == ""&&0==this.compType) {
                    layer.msg("请选择有效日期")
                } else if (this.business_img_back == kongimg&&0==this.compType) {
                    layer.msg("请上传执法人营业执照")
                }
                else if (this.img_organization_code_certificate == kongimg&&0==this.compType) {
                    layer.msg("请上传行业服务许可证")
                }
                else {
                    if (!this.isagree) { layer.msg("请同意协议"); return; }
                    if(1==this.compType){
                        this.business_img_back=""
                        this.img_organization_code_certificate=""
                    }
                    this.$http.post(this.APIURL_PREFIX + '/api/company', $.param({
                        companyName: this.company_name,
                        linkman: this.linkman,
                        mobile: this.mobile,
                        jmId: this.jm_id,
                        imgIdFront: this.img_id_front,
                        imgIdBack: this.img_id_back,  //手持身份证img_id_back_sc
                        imgFrontPhoto: this.img_id_back_sc,
                        province: this.province,
                        city: this.city,
                        district: this.district,
                        imgBusinessLicense: this.business_img_back,    //上传营业
                        businessCompanyName: this.unit_name,
                        businessLicenseNumber: this.license_id,
                        businessLegalPerson: this.method_name,
                        businessAddress: this.address_dz,
                        businessRange: this.scop_fw,
                        businessEffectiveTime: this.tim,
                        companyTypeId: this.hangyesubID,
                        imgOrganizationCodeCertificate: this.img_organization_code_certificate,
                        address: this.diqu,
                        provinceId: this.provinceID,    //省ID
                        cityId: this.cityID,         // 市
                        districtId: this.areaID,    //区
                        districtIds: this.districtId,    //最后一个
                        province: this.sheng,       //省
                        city: this.shi,          //市
                        district: this.qu,      //区
                        longitude: this.longitude,
                        latitude: this.latitude,
                        storeClassification:this.storeClassification,//店铺类型
                        authorizationCertificate:this.shouquan,//授权证明图片
                        depositStatus:this.depositStatus
                    })).then((response) => {
                        if (0 == response.data.code) {
                            layer.msg("上传成功");
                            this.chenggongl = true;
                        }else if("请交纳店铺押金"==response.data){
                             layer.msg(response.data);
                        }
                        else {
                            layer.msg(response.data);
                        }
                    }).catch(function (err) {

                    });
                }
            },
            switchagree() {
                this.isagree = !this.isagree;
            },
            switchaglee() {
                this.isaglef = !this.isaglef;
            },
            fanhuila() {//左滑动上传的弹出
                this.isagggg = !this.isagggg
            },
            onFileChange: function (e, targetparam) {
                var files = e.target.files || e.dataTransfer.files;
                console.log(targetparam);
                console.log(this[targetparam]);
                if (!files.length) return;
                this.createImage(files, e, targetparam);
            },
            createImage: function (file, e, targetparam) {
                let vm = this;
                lrz(file[0], { width: 480 })
                    .then(function (rst) {
                        vm.$http({
                            url: vm.APIURL_PREFIX + '/uploadForCertificate',
                            method: "post",
                            data: rst.formData
                        }).then((response) => {
                            console.log(response.data)
                            if (0 == response.data.code) {
                                if (targetparam) {
                                    vm[targetparam] = response.data.msg;
                                }
                                else {
                                    vm.imgUrls.push(response.data.msg);
                                }
                            }
                        }).catch(function (err) {
                            layer.msg("上传失败");
                            console.log(err)
                        });
                        return rst;
                    }).always(function () {
                        e.target.value = null;
                    });
            },
            delImage: function (index) {
                let vm = this;
                layer.confirm('确定要删除吗？', {
                    btn : [ '确定', '取消' ]//按钮
                }, function() {
                    vm.imgUrls.splice(index, 1);
                    layer.msg("删除成功");
                });
            }
        },
        watch:{
            company_name:function(newVal, ordVal){
               window.localStorage.company_name=this.company_name
            },
            linkman:function(newVal, ordVal){
               window.localStorage.linkman=this.linkman
            },
            mobile:function(newVal, ordVal){
               window.localStorage.mobile=this.mobile
            },
            jm_id:function(newVal,ordVal){
                window.localStorage.jm_id=this.jm_id
            },
            diqu:function(newVal,ordVal){
                window.localStorage.diqu=this.diqu
            },
            unit_name:function(newVal,ordVal){
                window.localStorage.unit_name=this.unit_name
            },
            license_id:function(newVal,ordVal){
                window.localStorage.license_id=this.license_id
            },
            method_name:function(newVal,ordVal){
                 window.localStorage.method_name=this.method_name
            },
            address_dz:function(newVal,ordVal){
                window.localStorage.address_dz=this.address_dz
            },
            scop_fw:function(newVal,ordVal){
                window.localStorage.scop_fw=this.scop_fw
            },
            end_data:function(newVal,ordVal){
                 window.localStorage.end_data=this.end_data
            },
            img_id_front:function(newVal,ordVal){
                window.localStorage.img_id_front=this.img_id_front
            },
            img_id_back:function(newVal,ordVal){
                window.localStorage.img_id_back=this.img_id_back
            },
            img_id_back_sc:function(newVal,ordVal){
                window.localStorage.img_id_back_sc=this.img_id_back_sc
            },
            business_img_back:function(newVal,ordVal){
                window.localStorage.business_img_back=this.business_img_back
            },
            img_organization_code_certificate:function(newVal,ordVal){
                window.localStorage.img_organization_code_certificate=this.img_organization_code_certificate
            },
            mjidxzStyle:function(newVal,ordVal){
                window.localStorage.mjidxzStyle=this.mjidxzStyle
            }
        }
    }
</script>

<style scoped>
    @import "../../../assets/business/css/business_rz.css";
    .xuanze{
        width: 15px;
        height: 15px;
        vertical-align: middle;
        margin-left: 15px;
    }
    .xllb{
      position: relative;
      margin-top: -10px;
      margin-right: 5px;

    }
    .xllbimg{
       position: absolute;
       right: 0;
       top: 20px;
       width: 15px;
       height: 10px;
    }
    .lijizhifu{
        background: #2691FF;
        color: #ffffff;
        padding: 5px 8px;
        border-radius: 5px;
    }
    .backTo{
        position: fixed;

    }
    .body{
        position: fixed;
        top: 0;
        z-index: 99999;
        height: 100%;
        overflow:scroll;
    }
    .shanhetongguo {
        width: 100%;
        height: 100%;
        position: fixed;
        z-index: 99999;
        transition: all 0.8s;
        top: 0;
        background-color: #ffffff;
        transform: translateY(-100%)
    }

    .cg {
        transition: all 0.8s;
        transform: translateY(0%)
    }

    .shanhetongguo img {
        margin: 50px auto;
        width: 30%;
    }

    .content_rl {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 1000;
        background: #f2f2f2;
        transform: translateX(0%);
        transition: all 0.8s
    }

    .z-ind {
        z-index: 9999;
    }

    .toptext {
        width: 100%;
        height: 2.5rem;
        overflow: hidden;
        line-height: 2.5rem;
        text-indent: 0.5rem;
    }

    .user-content {
        background: #ffffff;
        overflow: hidden;
    }

    .upload-content .same-upload {
        width: 70%;
        margin: 0 auto;
    }

        .upload-content .same-upload .top {
            height: 3rem;
            line-height: 3rem;
            text-align: center;
        }

            .upload-content .same-upload .top .icon {
                background: url(../../../assets/business/images/faq-icon.png) no-repeat center center;
                background-size: 100% 100%;
                display: inline-block;
                height: 0.75rem;
                width: 0.75rem;
            }

        .upload-content .same-upload .bottom {
            background: #ffffff;
            border: 1px solid #e5e5e5;
            height: 8rem;
            position: relative;
            width: 100%;
        }

            .upload-content .same-upload .bottom .image-info {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

            .upload-content .same-upload .bottom .up-info {
                display: block;
                width: 3rem;
                height: 3rem;
                margin: 0 auto;
                margin-top: 1.5rem;
                position: relative;
            }

            .upload-content .same-upload .bottom .b-text {
                text-align: center;
                margin-top: 0.5rem;
                color: #ff0808;
            }

    .jinqian {
        margin-left: 6rem;
    }

    .yingyezhizhao {
        transform: translateX(-100%);
        position: fixed;
        transition: all 0.8s;
        top: 0;
    }

    .yingyezhizhaozz {
        transform: translateX(0);
        position: fixed;
        transition: all 0.8s;
        top: 0;
    }

    .width {
        width: 100%;
        height: 100%;
        background: #ffffff;
        overflow-y: scroll;
        z-index: 9999;
    }

    .backTo {
        position: absolute;
    }

    .nl {
        display: inline !important;
    }

    .std {
        width: 80%;
        padding: 15px;
        position: relative;
    }

        .std div {
            position: absolute;
            line-height: 100%;
        }

            .std div input {
                width: 14px;
                height: 14px;
                margin-right: 10px;
                color: red
            }

            .std div span {
                font-size: 14px;
            }

            .std div:nth-of-type(2) {
                left: 103px;
            }

    .region_dingwei {
        height: 100%;
        line-height: 100%;
        padding: 18px;
        width: 100%;
        text-align: right;
    }

        .region_dingwei span {
        }
    /***********************************************************************************************************************此处一下是三级联动*/
    .region {
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 10px;
        background-color: rgba(0, 0, 0, 0.2);
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9900;
        overflow: hidden;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .area_ctr {
        vertical-align: middle;
        background-color: #d5d8df;
        color: #000;
        margin: 0;
        height: auto;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        z-index: 9901;
        overflow: hidden;
    }

    .area_btn_box {
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-box-align: stretch;
        -webkit-align-items: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
        background-color: #f1f2f4;
        position: relative;
    }

    .area_btn {
        color: #0575f2;
        font-size: 1.6em;
        line-height: 1em;
        text-align: center;
        padding: .8em 1em;
    }

    .area_roll {
        display: flex;
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: transparent;
    }

        .area_roll > div {
            font-size: 1.6em;
            height: 10em;
            float: left;
            background-color: transparent;
            position: relative;
            overflow: scroll;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }

    .area_grid {
        position: relative;
        top: 4em;
        width: 100%;
        height: 2em;
        margin: 0;
        box-sizing: border-box;
        z-index: 0;
        border-top: 1px solid #abaeb5;
        border-bottom: 1px solid #abaeb5;
    }

    .tooth {
        height: 2em;
        line-height: 2em;
        text-align: center;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        display: flex;
        line-clamp: 1;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        overflow: hidden;
    }

    .red {
        color: red;
    }
</style>
